<template>
	<view>
		<hx-navbar ref="hxnb" :config="config">
			<block slot="max">
				<view class="nav_wrap flex">
					<view class="back_wrap flex" v-if="addressList" @click="showsr1=true">
						<image class="dq-icon" src="../../static/img/home/aq-icon.png" mode=""></image>
						<view class="diqu">{{address?address:'请选择'}}</view>
						<u-icon name="arrow-down" color="#ffffff" size="24"></u-icon>
					</view>
					<view class="page_title font_18_FFF">
						找律师
					</view>
				</view>
			</block>
		</hx-navbar>
		<view class="main-div">
			<image class="main-bg" src="../../static/img/lawyer/l-bg.png" mode=""></image>
			<view class="zhanwei" :style="{'height':statusBarHeight+'rpx'}"></view>
			<view class="m-d">
				<view class="seach-div flex u-p-l-24 u-m-l-32 u-m-t-16"  @click="search">
					<image class="s-i" src="../../static/img/home/ss-2.png" mode=""></image>
					<view class="u-m-l-24">
						请输入相关词搜索
					</view>
				</view>
				<view class="ss-div flex flex_sa">
					<view class="ss-div-item" v-if="addressList" @click="showsr1=true">
						{{address?address:'区域'}}
						<u-icon class="u-m-l-8" name="arrow-down-fill" color="#999999" size="20"></u-icon>
					</view>
					<view class="ss-div-item" @click="showsr4=true">
						{{lytype?lytype:'擅长类型'}}
						<u-icon class="u-m-l-8" name="arrow-down-fill" color="#999999" size="20"></u-icon>
					</view>
					<view class="ss-div-item" @click="showsr2=true">
						{{paiming?paiming:'综合排名'}}
						<u-icon class="u-m-l-8" name="arrow-down-fill" color="#999999" size="20"></u-icon>
					</view>
				</view>
				
				<view class="ls-div u-m-t-20">
					<view class="ls-item flex"  v-for="(item,index) in lvshilist" :key="index" @click="toDetail(item)">
						<view class="">
							<image class="zhu-img" :src="item.avatar" mode="aspectFill"></image>
							<view class="flex flex_cen u-m-t-12" v-if="item.is_online==1">
								<view class="yuan"></view>
								<view class="zx-s">在线</view>
							</view>
						</view>
						<view class="u-m-l-34" style="width: 100%;">
							<view class="flex flex_sb">
								<view class="flex">
									<view class="font_14_333 font_weight">
										{{item.name}}
									</view>
									<image class="u-m-l-8 h23" src="../../static/img/home/h23.png" mode=""></image>
									<view class="font_10_333 u-m-l-8">
										{{item.province}}
									</view>
								</view>
								<view class="flex">
									<image class="h24" src="../../static/img/home/h24.png" mode=""></image>
									<view class="pf-t">{{item.mark}}</view>
								</view>
							</view>
							<view class="flex u-m-t-16">
								<view v-if="index2<3" class="u-m-r-4 line_1" :class="index2<3?'bq'+(index2+1):'bq1'" v-for="(item2,index2) in item.task_arr" :key="index2">
									{{item2.name}}
								</view>
							</view>
							<view class="flex u-m-t-16">
								<view class="flex">
									<view class="">执业：</view>
									<view class="pf-t">{{item.license_date}}</view>
								</view>
								<view class="fw-d flex u-m-l-16 u-p-l-16">
									<view class="">服务：</view>
									<view class="pf-t">{{item.serve_num}}人</view>
								</view>
							</view>
							<view class="flex u-m-t-16">
								<view class="btn1" @click.stop="zixun(1,item)">立即咨询</view>
								<view class="u-m-l-20 btn2" @click.stop="zixun(2,item)">预约咨询</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="zixunShow" mode="bottom" closeable border-radius="32"  :mask-close-able="false">
			<view class="po-bikan">
				<view class="bk-title u-m-b-32">
					全部服务
				</view>
				<scroll-view scroll-y="true" style="height: 650rpx;"  >
					<fuwuList v-if="id" :sid="id"></fuwuList>
				</scroll-view>
			</view>
		</u-popup>
		
		<u-picker mode="selector" confirm-color="#20C064" :range="lyselector" v-model="showsr4" range-key="name"
			@confirm="lyshowconfirm"></u-picker>
		<gongzhonghaotanchuangVue></gongzhonghaotanchuangVue>
		<!-- <u-picker :params="params" mode="region" confirm-color="#651321" v-model="showsr1" @confirm="regionconfirm1"></u-picker> -->
		<u-select v-model="showsr1" mode="single-column" :list="addressList" @confirm="regionconfirm1" value-name="id" label-name="name"></u-select>
		<u-select v-model="showsr2" mode="single-column" :list="paimingList" @confirm="regionconfirm2" value-name="id" label-name="name"></u-select>
		<u-tabbar active-color="#FA3B21" :list="tabbar" :mid-button="true"></u-tabbar>
	</view>
</template>

<script>
	import gongzhonghaotanchuangVue from '../../components/gongzhonghaotanchuang/gongzhonghaotanchuang.vue';	
	var statusBarHeight = (uni.getSystemInfoSync().statusBarHeight * 2);
	import fuwuList from '../../components/fuwuList/fuwuList.vue';
	import mypicker from '../../components/my-picker/my-picker.vue';
	import mypickertime from '../../components/my-picker-time/my-picker-time.vue';
	export default {
		components: {
			gongzhonghaotanchuangVue,
			fuwuList,
			mypicker,
			mypickertime
		},
		data() {
			return {
				addressList:null,
				params: {
					province: true,
					city: true,
					area: true
				},
				statusBarHeight: statusBarHeight,
				config: {
					maxSlot: true,
					back: false,
					barPlaceholder: false,
					backgroundColor: [0, '#0F57F0'],
					slideBackgroundColor: [1, '#0F57F0']
				},
				tabbar: '',
				showsr1: false,
				address: '',
				bottomShow:true,
				
				showsr2: false,
				showsr3: false,
				showsr4: false,
				zixunShow: false,
				selector1: [],
				paiming:'',
				paimingList:[{name:'全部',id:''},{name:'执业年限',id:'year'},{name:'响应速度',id:'speed'},{name:'服务好评',id:'serve'}],
				lvshilist:[],
				lyselector:[],
				lytype:'',
				task_id:'',
				province:'',
				id:'',
				orderby:'',
				
				total:0,
				pageNum:1,
				pageSize:10,
			}
		},
		onLoad() {
			this.tabbar = [{
					iconPath: "/static/img/tabBar/1-2.png",
					selectedIconPath: "/static/img/tabBar/1-1.png",
					text: '首页',
					pagePath: "/pages/index/index"
				}, {
					iconPath: "/static/img/tabBar/2-2.png",
					selectedIconPath: "/static/img/tabBar/2-1.png",
					text: '找律师',
					pagePath: "/pages/lawyer/lawyer"
				}, {
					iconPath: "/static/img/tabBar/3-1.png",
					selectedIconPath: "/static/img/tabBar/3-1.png",
					text: 'AI模型',
					midButton: true,
					pagePath: "/pages/AI/AI"
				}, {
					iconPath: "/static/img/tabBar/4-1.png",
					selectedIconPath: "/static/img/tabBar/4-1.png",
					text: '在线咨询',
					// count: 2,
					isDot: false,
					pagePath: "/TXIM/pages/consultation/consultation"
				}, {
					iconPath: "/static/img/tabBar/5-2.png",
					selectedIconPath: "/static/img/tabBar/5-1.png",
					text: '我的',
					pagePath: "/pages/mine/mine"
				},

			]
			
			
			this.lingyuList()
			this.getaddrerss()
			
			
			if(uni.getStorageSync("localAddress")){
				let localAddress = JSON.parse(uni.getStorageSync("localAddress")) 
				this.address = localAddress.address
				this.province = localAddress.province
			}
			
			this.getlvshi()
		},
		onPageScroll(e) {
			// 重点，用到滑动切换必须加上
			this.$refs.hxnb.pageScroll(e);
		},
		onReachBottom() {
			if (this.pageNum * this.pageSize > this.total) {
				// uni.hideNavigationBarLoading();
			} else {
				this.pageNum++;
				this.getlvshi()
			}
		},
		methods: {
			getaddrerss(){
				this.$api({
					url: '/getChinaArea',
					method: 'get',
				}).then(res => {
					if (res.code == 1) {
						this.addressList = res.data
						this.addressList.unshift({id:'',name:'全国'})
						
						
					}
				})
			},
			lyshowconfirm(e) {
				this.pageNum = 1
				this.lytype = this.lyselector[e].name
				this.task_id = this.lyselector[e].id
				this.getlvshi()
			},
			lingyuList() {
				this.$api({
					url: '/lawyer/getTags',
					method: 'get',
					data: {
						token: uni.getStorageSync("token"),
						type: 1 //类型：1=擅长领域，2=服务类型
					},
				}).then(res => {
					if (res.code == 1) {
						this.lyselector = res.data
						this.lyselector.unshift({id:'',name:'全部'})
					}
				})
				
				// this.$api({
				// 	url: '/lawyer/getTags',
				// 	method: 'get',
				// 	data: {
				// 		token: uni.getStorageSync("token"),
				// 		type: 2 //类型：1=擅长领域，2=服务类型
				// 	},
				// }).then(res => {
				// 	if (res.code == 1) {
				// 		this.selector1 = res.data
				// 	}
				// })
			},
			getlvshi(){
				this.$api({
					url: '/user/look_lawyers',
					method: 'get',
					data: {
						page:this.pageNum,
						limit:this.pageSize,
						province:this.province,
						task_id:this.task_id,
						orderby:this.orderby
					},
				}).then(res => {
					if (res.code == 1) {
						// this.lvshilist = res.data.data
						this.total=res.data.total
						let data = res.data.data
						if (this.pageNum == 1) {
							this.lvshilist = data
						} else {
							this.lvshilist = [...this.lvshilist, ...data]
						}
					}
				})
			},
			regionconfirm1(e) {
				// this.address = e.area.label
				// this.province = e.area.value
				this.address = e[0].label
				this.province = e[0].value
				this.pageNum = 1
				this.getlvshi()
				console.log(e)
				
				let localAddress = {
					address:this.address,
					province:this.province
				}
				uni.setStorage({
					key: 'localAddress',
					data: JSON.stringify(localAddress)
				});
			},
			regionconfirm2(e){
				this.paiming = e[0].label
				this.orderby = e[0].value
				this.pageNum = 1
				this.getlvshi()
			},
			toDetail(e){
				uni.navigateTo({
					url:"/pages/lawyer/lawyerDetail?id=" + e.id
				})
			},
			search() {
				uni.navigateTo({
					url: "/pages/index/search"
				})
			},
			zixun(e,item) {
				this.id = ''
				setTimeout(()=>{
					this.id = item.id
					if (e == 1) {
						this.zixunShow = true
					}
					if (e == 2) {
						uni.navigateTo({
							url: "/pages/lawyer/lawyerListDetail?id="+item.id
						})
					}
				},50)
			},
			
		}
	}
</script>

<style scoped lang="scss">
	.po-bikan {
		padding: 40rpx 32rpx;
		background: #F6F6F6;
		width: 100%;
	
		.bk-title {
			font-weight: bold;
			font-size: 32rpx;
			color: #222222;
		}
	}
	.nav_wrap {
		width: 100%;
		position: relative;

		.back_wrap {
			position: absolute;
			left: 24rpx;

			.diqu {
				font-weight: 600;
				font-size: 32rpx;
				color: #FFFFFF;
				margin: 0 12rpx;
			}

			.dq-icon {
				width: 28rpx;
				height: 34rpx;
			}
		}

		.page_title {
			width: 100vw;
			text-align: center;
			font-weight: bold;
		}
	}
	.main-div {
		position: relative;
		width: 100%;
		
		.main-bg {
			width: 100%;
			height: 280rpx;
			position: absolute;
			top: 0;
			z-index: 0;
		}
		.zhanwei {
			width: 100%;
		}
	}
	
	.m-d {
		position: relative;
		padding-top: 88rpx;
		z-index: 2;
	
		.seach-div {
			width: 686rpx;
			height: 72rpx;
			border-radius: 36rpx 36rpx 36rpx 36rpx;
			border: 1rpx solid #FFFFFF;
			font-size: 24rpx;
			color: #FFFFFF;
	
			.s-i {
				width: 32rpx;
				height: 32rpx;
			}
		}
		
	}
	.ss-div{
		width: 750rpx;
		height: 88rpx;
		background: #FFFFFF;
		margin-top: 20rpx;
		.ss-div-item{
			font-size: 28rpx;
			color: #333333;
		}
	}
	.bq1 {
		font-size: 20rpx;
		color: #FF4A50;
		padding: 4rpx 6rpx;
		background: #F8EDED;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		margin-right: 8rpx;
	}
	
	.bq2 {
		font-size: 20rpx;
		color: #5385E3;
		padding: 4rpx 6rpx;
		background: #E5F3FF;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		margin-right: 8rpx;
	}
	
	.bq3 {
		font-size: 20rpx;
		color: #F7790D;
		padding: 4rpx 6rpx;
		background: #FFE8D3;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		margin-right: 8rpx;
	}
	.ls-item{
		width: 686rpx;
		padding: 24rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 20rpx auto;
		
		.zhu-img{
			width: 136rpx;
			height: 168rpx;
			border-radius: 8rpx;
		}
		.yuan{
			width: 12rpx;
			height: 12rpx;
			background: #20C064;
			border-radius: 50%;
		}
		.h23{
			width: 24rpx;
			height: 20rpx;
		}
		.h24{
			width: 24rpx;
			height: 24rpx;
			margin-right: 8rpx;
		}
		.zx-s{
			font-size: 24rpx;
			color: #333333;
		}
		.pf-t{
			font-size: 20rpx;
			color: #FD8643;
		}
		.fw-d{
			border-left: 1px #999 solid;
		}
		.btn1{
			width: 196rpx;
			height: 56rpx;
			background: linear-gradient( 180deg, #FA2D2D 0%, #F40000 100%);
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			font-size: 24rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 56rpx;
		}
		.btn2{
			font-size: 24rpx;
			color: #F81B19;
			text-align: center;
			line-height: 56rpx;
			width: 196rpx;
			height: 56rpx;
			background: #FFEBEB;
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			border: 2rpx solid #FF9D9D;
		}
	}
	
</style>